<template>
  <!-- 1. 属性props 修改样式和功能
        2. 事件  事件的回调函数的形参
        3. 插槽  自定义修改部分内容
        4. 方法  一般通过ref获取组件后调用的方法-->
  <div>
      <h1>商品管理系统</h1>
      <div class="search_wrap">
       <el-input v-model="search_name"  placeholder="输入商品名"></el-input>
        <el-input v-model="search_price"  placeholder="输入价格"></el-input>
         <el-button type="primary" 
         @click="toSearch"
      >查询</el-button>
       <el-button type="primary" 
       @click="addFlag=true">添加</el-button>
      </div>
      <!-- 对话框组件 -->
      <el-dialog :visible.sync="addFlag" width="50%" :title="title" >
          <el-form :model="addObj" :rules="rules">
              <el-form-item label="图片：">
                <el-input v-model="addObj.imgsrc"></el-input>
              </el-form-item>
              <el-form-item prop="pname" label="名称：">
                <el-input v-model="addObj.pname"></el-input>
              </el-form-item>
              <el-form-item prop="price" label="价格：">
                <el-input v-model="addObj.price"></el-input>
              </el-form-item>
              <el-form-item label="分类：">
                  <el-select v-model="addObj.fenlei">
                      <el-option value="电脑">电脑</el-option>
                      <el-option value="手机">手机</el-option>
                      <el-option value="冰箱">冰箱</el-option>
                  </el-select>
              </el-form-item>
          </el-form>
        <template #footer> 
          <div> 
              <el-button @click="toAdd" type="success">确定</el-button>
              <el-button>取消</el-button>
          </div>
        </template>
      </el-dialog>
      <hr>
      <h1>商品列表展示</h1>
      <el-table border stripe :data="productList">
        <el-table-column prop="_id" label="id"></el-table-column>
         <el-table-column  label="图片">
            <template #default="scope">
              <!-- scope.row -->
              <div>
                  <img :src="scope.row.imgsrc" alt="">
              </div>
            </template>
         </el-table-column>
          <el-table-column prop="pname" label="名称"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="fenlei" label="分类"></el-table-column>
             <el-table-column label="操作">
               <template #default="scope">
                <div>
                  <el-button type="primary" @click="toEdit(scope.row)">编辑</el-button>
                   <el-button @click="toDel(scope.row._id)" type="danger">删除</el-button>
                </div>
               </template>
             </el-table-column>
      </el-table>
  </div>
</template>
<script>
import { productAdd ,getProList,delProduct,updateProduct,toLogin} from '../../api/test.js'
export default {
  name: '2209vueIndex',
  data() {
    return {
      editId:"",//正在编辑的商品id
      title:"添加商品",
      addFlag:false,
      addObj:{ //
         imgsrc:"",
         pname:"",
         price:"",
        fenlei:""
      },
      search_name:"", //搜索需要的name
      search_price:"",//搜索需要的价格
      productList:[],//商品列表
      rules:{ //表单规则
        pname:[
          {required:true,message:"名字必填",trigger:"blur"}
          ,{
            min:1,max:5,message:"长度不符合规则",
            trigger:"blur"
        }],
        price:[{pattern:/^\d{1,6}$/,message:"价格不符合规则", trigger:"blur"}]
      }
    }
  },
  created() {
    this.getList();
    toLogin({
      addemail:"111@qq.com",
      adduserName:"dsafsf",
      addphone:'18733333333'
    }).then(res=>{
      console.log(res)
    })
  },
  mounted() {
    
  },

  methods: {
    toSearch(){ //搜索
        this.getList()
        // 查询完成 情况输入框
        this.search_name=""
        this.search_price=""
    },
    toEdit(row){ //点击编辑打开弹出层  做回显
        this.addFlag=true;
        this.title="编辑商品"
        // 回显
        this.addObj.imgsrc=row.imgsrc;
        this.addObj.pname=row.pname;
        this.addObj.price=row.price;
        this.addObj.fenlei=row.fenlei;
        // 存储编辑id
        this.editId=row._id;//编辑的_id
    },
    async toDel(_id){ //删除方法
      let res=await delProduct(_id)
      if(res.data.success){
        // 删除成功 重新获取列表
        this.getList()
      }
    },
    async getList(){ //获取商品列表
      console.log(88888888)
      let res=await getProList({
        pname:this.search_name,
        price:this.search_price
      })
      console.log(res,"-----------")
      this.productList=res.data;
    },
    async toAdd(){ //添加或修改
          if(this.editId){ //如果有修改id、
              this.addObj._id=this.editId;//修改接口多一个id
              let editres=await updateProduct(this.addObj)
              if(editres.data.success){
                  this.$message.success("修改成功")
                this.editId=""
              }
            
          }else{
            let addres=await productAdd(this.addObj)
         
                if(addres.data.success){
                  // elementui 轻提示
                  this.$message.success("添加成功")
                this.editId=""
              }
          }
            this.title="添加商品"

            this.addFlag=false;//修改成功 关闭弹出层
            // 情况输入框
             this.addObj.imgsrc="";
            this.addObj.pname="";
            this.addObj.price="";
            this.addObj.fenlei="";
          // 添加完成或修改完成 都要从新获取列表
            this.getList();
     
    }
  }
}
</script>
<style lang="less">
    .search_wrap{
      display:flex;
      justify-content:space-between;

    }
    td img{
        width:200px;
        height:200px;
    }
</style>